<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DIV+CSS网站布局实例</title>
		<style type="text/css">
			/*公共样式：解决兼容性*/
			body,div,span,a,h1,h2,h3,h4,h5,h6,ul,li,ol,table,tr,td,th,p,img{margin: 0px;padding: 0px;}
			ul{list-style: none;}
			.clear{clear: both;width: 100%;height: 5px;}
			#backgr{width: 100%;margin: 0px;background-color: #AA0000;}
			#container{width:1200px;margin: 0px auto;background-color: #AA0000;}
			#header{width:100%;height:100px;background-color:#ddd;border-radius: 30px;}

			/*导航栏开始*/
			#nav{width: 70%;height: 50px;margin:5px auto;background:url("./images/abc.jpg") repeat-x 0px 0px;}
			#nav ul li{width: 100px;float: left;line-height: 50px;margin-left: 30px;}
			#nav ul li a{color:#fff;text-decoration: none;line-height: 50px;font-size: 18px;font-weight: bold;text-align: center;width: 100px;height: 50px;display: block;}
			#nav ul li a:hover{color:#AA0000;background-color: #ddd}
			/*导航栏结束*/
			#outside1{width:15%;height: 864px;float: left;}
			#outside2{width:15%;height: 1030px;float: right;background: url("./images/outside2.jpg") repeat-y 0px 0px;}
			#main{width: 70%;margin: 5px auto}
			/*商品内容开始*/
			#article{width: 700px;height: 1020px;background-color: #FFF;float: right;}
			/*热销爆款开始*/
			#sellwell{width: 700px;height: 50px;background-color: #ddd;border-color: #AA0000;border-width: 10px;}
			#sellwell ul li{width: 300px;margin-left:5px;line-height:70px;font-size: 21px;font-weight: bold;color:#AA0000;text-align: center;background: url("./images/sellwell.jpg") no-repeat 0px 0px;}
			#article1{width: 700px;height: 300px;}
			#sellwellphone1{width: 200px;height: 300px;float: left;border-right:1px solid #FFF0F5;}
			#sellwellphone1 a{text-decoration:none;font-size: 21px;font-weight: bolder;color:red;text-align: center;}
			#phone1info{width: 150px;height: 300px;float: left;border-right:3px solid #ddd;border-radius: 3px;}
			#phone1info ul li{margin: 5px;font-size: 10px;font-style: "宋体"；}

			#sellwellphone2{width: 200px;height: 300px;float: left;border-right:1px solid #FFF0F5;}
			#sellwellphone2 a{text-decoration:none;font-size: 21px;font-weight: bolder;color:red;text-align: center;}
			#phone2info{width: 140px;height: 300px;float: left;border-radius: 3px;}
			#phone2info ul li{margin: 5px;font-size: 10px;font-style: "宋体"；}
			/*热销爆款结束*/
			/*爆款预售开始*/
			#sellnew{width: 700px;height: 50px;background-color: #ddd;border-color: #AA0000;border-width: 10px;}
			#sellnew ul li{width: 300px;margin-left:5px;line-height:70px;font-size: 21px;font-weight: bold;color:#AA0000;text-align: center;background: url("./images/sellwell.jpg") no-repeat 0px 0px;}
			#article2{width: 700px;height: 620px;}
			#sellnewphone3{width: 220px;height: 300px;float: left;border-right:1px solid #FFF0F5;margin:5px;}
			#sellnewphone3 a{text-decoration:none;font-size: 21px;font-weight: bolder;color:red;text-align: center;}
			#sellnewphone4{width: 220px;height: 300px;float: left;border-right:1px solid #FFF0F5;margin:5px;}
			#sellnewphone4 a{text-decoration:none;font-size: 21px;font-weight: bolder;color:red;text-align: center;}
			#sellnewphone5{width: 220px;height: 300px;float: left;border-right:1px solid #FFF0F5;margin:5px;}
			#sellnewphone5 a{text-decoration:none;font-size: 21px;font-weight: bolder;color:red;text-align: center;}
			#sellnewphone6{width: 220px;height: 300px;float: left;border-right:1px solid #FFF0F5;margin:5px;}
			#sellnewphone6 a{text-decoration:none;font-size: 21px;font-weight: bolder;color:red;text-align: center;}
			#sellnewphone7{width: 220px;height: 300px;float: left;border-right:1px solid #FFF0F5;margin:5px;}
			#sellnewphone7 a{text-decoration:none;font-size: 21px;font-weight: bolder;color:red;text-align: center;}
			#sellnewphone8{width: 220px;height: 300px;float: left;border-right:1px solid #FFF0F5;margin:5px;}
			#sellnewphone8 a{text-decoration:none;font-size: 21px;font-weight: bolder;color:red;text-align: center;}
			
			/*爆款预售结束*/
			/*商品内容结束*/
			/*商品列表开始*/
			#aside{width: 120px;height: 930px;background:url("./images/aside0.jpg") repeat-y 0px 0px;float: left;border:1px solid red;}
			#aside ul li{width: 120px;margin: 2px auto;line-height: 60px;}
			#aside ul li a{color: black;text-decoration: none;line-height:50px;font-size: 13px;font-weight:bold;text-align: center;width: 120px;height: 60px;display: block;}
			#aside ul li a:hover{color: #ddd;background-color: red;font-size: 16px;}
			/*商品列表结束*/
			#footer{width: 100%;height: 70px;margin:5px auto;background-color: #ddd;}
			#footer ul li{float:left;margin: 5px;}
			#footer ul li a{text-decoration: none;font-size: 13px;color: black;}
		</style>
	</head>
	<body>
		<div id="backgr">
			<div id="container">
				<!--页头开始-->
				<div id="header">
					<img src="./images/title.png" title="图片" width="1200" height="110" />				
				</div>
				<!--页头结束-->
				<!--导航开始-->
				<div id="nav">
					<ul>
						<li><a href="#">首页</a></li>
						<li><a href="#">商品列表</a></li>
						<li><a href="#">热门商品</a></li>
						<li><a href="#">新品上市</a></li>
						<li><a href="#">促销商品</a></li>
						<li><a href="#">联系我们</a></li>
					</ul>
				</div>
				<!--导航结束-->
				<div class="clear"></div>
				<!--修饰最外两侧开始-->
				<div id="outside1">
					<img src="./images/outside1num1.jpg" title="图片" width="180" height="288" />
					<img src="./images/outside1num2.jpg" title="图片" width="180" height="288" />
					<img src="./images/outside1num3.jpg" title="图片" width="180" height="288" />
				</div>
				<div id="outside2">
				</div>
				<!--修饰最外两侧结束-->
				<!--主体内容开始，一共宽1200px-->
				<div id="main">
					<!--商品内容-->
					<div id="article">
						<!--热销商品-->
						<div id="sellwell">
							<ul>
								<li> 必买爆款</li>
							</ul>
						</div>
						<div class="clear"></div>
						<div id="article1">
							<div id="sellwellphone1">
								<img src="./images/phone1.jpg" title="手机1" width="200" height="200">
								<a href="#"><p>Xiaomi/小米8 青春版</p>
								<p>预售价￥1399.00</p></a> 
							</div>
							<div id="phone1info">
								详细信息
								<hr/>
								<ul>
									<li>产品名称：Apple/苹果 iPhone X</li><p></p>
									<li>CPU型号: 骁龙660</li><p></p>
									<li>运行内存RAM: 4GB 6GB</li><p></p>
									<li>网络模式: 双卡双待</li><p></p>
									<li>Apple型号: iPhone X</li><p></p>
									<li>存储容量: 64GB 256GB</li><p></p>
									<li>机身颜色: 银色 深空灰色</li><p></p>
									<li>证书编号：2017011606002271</li><p></p>
									<li>证书状态：有效</li><p></p>
									<li>产品名称：TD-LTE数字移动电话机</li><p></p>
									<li>3C规格型号：A1865</li><p></p>
								</ul>
							</div>
							<div id="sellwellphone2">
								<img src="./images/phone2.jpg" title="手机2" width="200" height="200">
								<a href="#"><p>Apple/苹果 iPhone X 64G</p>
								<p>预售价￥7099.00</p></a>
							</div> 
							<div id="phone2info">
								详细信息
								<hr/>
								<ul>
									<li>产品名称：Xiaomi/小米 小米8 青春版</li><p></p>
									<li>CPU型号: 骁龙660</li><p></p>
									<li>运行内存RAM: 4GB 6GB</li><p></p>
									<li>网络模式: 双卡双待</li><p></p>
									<li>型号: 小米8 青春版</li><p></p>
									<li>存储容量: 4+64GB</li><p></p>
									<li>机身颜色: 深空灰 梦幻蓝</li><p></p>
									<li>证书编号：2018011606101263</li><p></p>
									<li>证书状态：有效</li><p></p>
									<li>产品名称：TD-LTE数字移动电话机</li><p></p>
									<li>3C规格型号：M1808D2TE</li><p></p>
								</ul>
							</div>
						</div>
						<!--最新商品-->
						<div class="clear"></div>
						<div id="sellnew">
							<ul>
								<li> 最新商品</li>
							</ul>
						</div>
						<div class="clear"></div>
						<div id="article2">
							<div id="sellnewphone3">
								<img src="./images/phone3.jpg" title="手机3" width="200" height="200">
								<a href="#"><p>Apple/苹果 iPhone 8 64G</p>
								<p>预售价￥4488.00</p></a>
							</div>
							<div id="sellnewphone4">
								<img src="./images/phone4.jpg" title="手机4" width="200" height="200">
								<a href="#"><p>华为honor/荣耀 荣耀Magic 2</p>
								<p>预售价￥3799.00</p></a>
							</div>
							<div id="sellnewphone5">
								<img src="./images/phone5.jpg" title="手机5" width="200" height="200">
								<a href="#"><p>Huawei/华为 Mate 20</p>
								<p>预售价￥3999.00</p></a>
							</div>
							<div id="sellnewphone6">
								<img src="./images/phone6.jpg" title="手机6" width="200" height="200">
								<a href="#"><p>OPPO K1</p>
								<p>预售价￥1599.00</p></a>
							</div>
							<div id="sellnewphone7">
								<img src="./images/phone7.jpg" title="手机7" width="200" height="200">
								<a href="#"><p>vivo Z3</p>
								<p>预售价￥1598.00</p></a>
							</div>
							<div id="sellnewphone8">
								<img src="./images/phone8.jpg" title="手机8" width="200" height="200">
								<a href="#"><p>Apple/苹果 iPhone5s</p>
								<p>预售价￥999.00</p></a>
							</div>
						</div>
					</div>
					<!--其他商品/商品栏目-->
					<div id="aside">
						<ul>
							<li><a href="#">大牌店铺</a></li>
							<li><a href="#">爆款预售</a></li>
							<li><a href="#">必买爆款</a></li>
							<li><a href="#">双11特供</a></li>
							<li><a href="#">周年献礼</a></li>
							<li><a href="#">精选店铺</a></li>
							<li><a href="#">分期免息</a></li>
							<li><a href="#">特色品牌</a></li>
							<li><a href="#">亲情手机</a></li>
							<li><a href="#">沪上手机</a></li>
							<li><a href="#">定制款别</a></li>
							<li><a href="#">精选配件</a></li>
							<li><a href="#">精彩会场</a></li>
							<li><a href="#">更多会场</a></li>
							<li><a href="#">猜你喜欢</a></li>
						</ul>
					</div>
				</div>
				<div class="clear"></div>
				<!--主体部分结束-->
				<!--页尾开始-->
				<div id="footer">
					<ul>
						<li><a href="#">帮助中心</a></li>
						<li><a href="#">客服中心</a></li>
						<li><a href="#">招聘地址</a></li>
						<li><a href="#">网站合作</a></li>
						<li><a href="#">法律声明</a></li>
						<li><a href="#">联系我们</a></li>
					</ul>
				</div>
				<!--页尾结束-->
			</div>
		</div>
	</body>
</html>